<template>
  <vue-draggable-resizable
    :grid="[2,2]"
    class="drag-item"
    :isLock="componentFrontAttr[item.id].isLock"
    :lock-aspect-ratio="item.cid == COMPONENT_TYPES.wb_img ? true : false"
    :active="item.active"
    @dragging="onDrag"
    @resizing="onResize"
    @activated="onActivated"
    @deactivated="onDeactivated"
    :onDragStart="onDragStartCallback"
    :w="item.conAttr.width"
    :h="item.conAttr.height"
    :x="oddChangeEven(item.conAttr.left)"
    :y="oddChangeEven(item.conAttr.top)"
    :min-height="10"
    :min-width="10"
    :z="item.conAttr.zIndex"
    :class="{isHiddenComp: componentFrontAttr[item.id].isHidden}">
      <component :is="item.type" :item="item" ref="comp"></component>
      <div class="mask" ref="mask" v-if="isMask"
      @dblclick.stop.prevent="onIsEdit"
      @click.right.prevent.exact="onRight"
      @click.stop.prevent></div>
    </vue-draggable-resizable>
</template>
<script>
import { COMPONENT_TYPES } from '@/common/const'
import { REFRESH_COMMON_ATTR } from '@/common/const-wb'
import { mapActions, mapState } from 'vuex'
import { reactive, defineAsyncComponent } from 'vue'
import { getPxOVwByValue } from '@/store/utils'

const components = {
  VueDraggableResizable: defineAsyncComponent(() => import('@/views/components/vue-draggable-resizable.vue')),
  GroupCarousel: defineAsyncComponent(() => import('@/components/lists/group-carousel.vue')),
  GroupComponent: defineAsyncComponent(() => import('@/components/group-component.vue')),

  WbText: defineAsyncComponent(() => import('@/components/common/wb-text.vue')),
  WbImg: defineAsyncComponent(() => import('@/components/common/wb-img.vue')),
  WbIcon: defineAsyncComponent(() => import('@/components/common/wb-icon.vue')),
  WbSvgIcon: defineAsyncComponent(() => import('@/components/common/wb-svg-icon.vue')),
  WbImgs: defineAsyncComponent(() => import('@/components/common/wb-imgs.vue')),
  WbAudio: defineAsyncComponent(() => import('@/components/common/wb-audio.vue')),
  WbVideo: defineAsyncComponent(() => import('@/components/common/wb-video.vue')),
  WbVideos: defineAsyncComponent(() => import('@/components/common/wb-videos.vue')),
  WbTimer: defineAsyncComponent(() => import('@/components/common/wb-timer.vue')),
  WbMenu: defineAsyncComponent(() => import('@/components/common/wb-menu.vue')),
  WbCamera: defineAsyncComponent(() => import('@/components/common/wb-camera.vue')),
  WbTurnBook: defineAsyncComponent(() => import('@/components/common/wb-turn-book.vue')),
  WbScrollContainer: defineAsyncComponent(() => import('@/components/common/wb-scroll-container.vue')),
  WbMoveable: defineAsyncComponent(() => import('@/components/common/wb-moveable.vue')),
  WbCalendar: defineAsyncComponent(() => import('@/components/common/wb-calendar.vue')),
  WbGraspDoll: defineAsyncComponent(() => import('@/components/common/wb-grasp-doll.vue')),
  WbBg: defineAsyncComponent(() => import('@/components/common/wb-bg.vue')),
  WbProcess: defineAsyncComponent(() => import('@/components/common/wb-process.vue')),
  WbFlipMc: defineAsyncComponent(() => import('@/components/common/wb-flip-mc.vue')),
  WbSlotMachine: defineAsyncComponent(() => import('@/components/common/wb-slot-machine.vue')),
  WbNoticeBar: defineAsyncComponent(() => import('@/components/common/wb-notice-bar.vue')),

  WbCommonList: defineAsyncComponent(() => import('@/components/lists/wb-common-list.vue')),
  WbTable: defineAsyncComponent(() => import('@/components/lists/wb-table.vue')),
  WbCarousel: defineAsyncComponent(() => import('@/components/lists/wb-carousel.vue')),
  WbItemCommon: defineAsyncComponent(() => import('@/components/items/wb-item-common.vue')),
  WbHead: defineAsyncComponent(() => import('@/components/wb/wb-head.vue')),
  //global
  WbIsPostEvent: defineAsyncComponent(() => import('@/components/global/wb-is-post-event.vue')),

  WbForm: defineAsyncComponent(() => import('@/components/form/wb-form.vue')),
  WbFormScore: defineAsyncComponent(() => import('@/components/form/wb-form-score.vue')),
  WbAddress: defineAsyncComponent(() => import('@/components/form/wb-address.vue')),
  WbInput: defineAsyncComponent(() => import('@/components/form/wb-input.vue')),
  WbBtn: defineAsyncComponent(() => import('@/components/form/wb-btn.vue')),
  WbRadio: defineAsyncComponent(() => import('@/components/form/wb-radio.vue')),
  WbCheckbox: defineAsyncComponent(() => import('@/components/form/wb-checkbox.vue')),
  WbDropdown: defineAsyncComponent(() => import('@/components/form/wb-dropdown.vue')),
  WbUpload: defineAsyncComponent(() => import('@/components/form/wb-upload.vue')),
  WbSwitch: defineAsyncComponent(() => import('@/components/form/wb-switch.vue')),

  //canvas cretejs phaser three
  WbBitmapText: defineAsyncComponent(() => import('@/components/games/createjs/wb-bitmap-text.vue')),
  WbMc: defineAsyncComponent(() => import('@/components/games/createjs/wb-mc.vue')),
  //paper
  WbPaper: defineAsyncComponent(() => import('@/components/games/paper/wb-paper.vue')),
  //pixi  
  WbPixis: defineAsyncComponent(() => import('@/components//games/pixi/wb-pixis.vue')),
  //three
  WbPanorama: defineAsyncComponent(() => import('@/components/games/threejs/wb-panorama.vue')),
  WbThrees: defineAsyncComponent(() => import('@/components/games/threejs/wb-threes.vue')),
  //phaser
  WbPhasers: defineAsyncComponent(() => import('@/components/games/phaser/wb-phasers.vue')),
}

export default {
  components,
  props: {
    item: Object,
  },
  setup () {
    const state =  reactive({
      isMask: true,
    })
    const state_ = {
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      COMPONENT_TYPES: COMPONENT_TYPES,
    }
    _.merge(state, state_)
    return state
  },
  computed: {
    ...mapState({
      attrs: state => state.components.attrs,
      componentFrontAttr: state => state.components.componentFrontAttr,
      shiftComponents: state => state.components.siteStatus.shiftComponents
    })
  },
  methods: {
     ...mapActions("components", {
      recordMousePosition: 'recordMousePosition',
      changeWH: 'changeWH',
      setActiveComponentId: 'setActiveComponentId',
      setIsEdit: 'setIsEdit',
      setDragComponentZIndex: "setDragComponentZIndex",
      setRightMenuStatus: "setRightMenuStatus",
      recordComponentAttr: "recordComponentAttr",
    }),
    oddChangeEven(value){
      if(value % 2 == 0){
        return value
      }else{
        return value + 1
      }
    },
    onRight(){
      let conAttr = this.item.conAttr
      let top = getPxOVwByValue(conAttr.top + conAttr.height/2);
      let left = getPxOVwByValue(conAttr.left + conAttr.width);
      this.setRightMenuStatus( { isVisible: true, left, top  } )
    },
    onResize(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.changeWH({width, height});
    },
    onDrag(x, y) {
      if(this.shiftComponents.length > 0){
        this.$store.commit("components/clearShiftComponents")
        this.setActiveComponentId(this.item)
      }
      this.x = x;
      this.y = y;
      this.recordMousePosition({left: x, top: y});
    },
    onActivated(){
      // let data = {id: this.item.id, cid:this.item.cid};
      this.setActiveComponentId(this.item)
      this.recordComponentAttr();

      if(REFRESH_COMMON_ATTR.indexOf(this.item.cid) != -1) {
        if(this.$refs.comp) {
          if (this.$refs.comp.$refs.item) {
            this.$refs.comp.$refs.item.addCommonAttrListener();
          }else if(this.$refs.comp.addCommonAttrListener) {
            this.$refs.comp.addCommonAttrListener();
          }
        }
      }
      if(this.$refs.comp && this.$refs.comp.$refs) {
        if(this.$refs.comp.$refs.injectTemplate && this.$refs.comp.$refs.injectTemplate.addAnimateListener) {
          this.$refs.comp.$refs.injectTemplate.addAnimateListener();
        } else if(this.item.cid == COMPONENT_TYPES.group_component) {
          this.$refs.comp.addAnimateListener();
        }
      }
    },
    onDeactivated(){
      this.setActiveComponentId();
      this.setIsEdit(false);
      this.isMask = true;

      if(REFRESH_COMMON_ATTR.indexOf(this.item.cid) != -1) {
        if(this.$refs.comp) {
          if (this.$refs.comp.$refs.item) {
            this.$refs.comp.$refs.item.removeCommonAttrListener();
          }else if(this.$refs.comp.removeCommonAttrListener) {
            this.$refs.comp.removeCommonAttrListener();
          }
        }
      }
      if(this.$refs.comp && this.$refs.comp.$refs) {
        if(this.$refs.comp.$refs.injectTemplate && this.$refs.comp.$refs.injectTemplate.addAnimateListener) {
          this.$refs.comp.$refs.injectTemplate.removeAnimateListener();
        } else if(this.item.cid == COMPONENT_TYPES.group_component) {
          this.$refs.comp.removeAnimateListener();
        }
      }
    },
    onIsEdit(){
      if(this.item.cid == COMPONENT_TYPES.wb_text){
        this.isMask = false;
        this.setIsEdit(true);
      }
    },
    onDragStartCallback(){
      // this.setDragComponentZIndex()
      // this.setActiveComponentId(this.item)
      this.recordComponentAttr()
    },
  },
};
</script>
<style lang="scss">
.drag-item{
  // position: relative;
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-color: black;
    opacity: 0.02;
    z-index: 50;
  }
}
</style>
